<template>
    <div class="home">
           <transition
                :enter-active-class="enter"
                :leave-active-class="leave">
        <router-view class="router-view"></router-view>
        </transition>
    </div>
</template>

<script>

    export default {
        name:'home',

        data() {
            return {
                enter:'',
                leave:''
            }
        },

        components:{
            
        },

        mounted() {

        },

        watch: {
            '$route' (to, from) {
                const toDepth = to.path.split('/').length;
                const fromDepth = from.path.split('/').length;
                this.enter = toDepth < fromDepth ? 'animated fadeInLeft' : 'animated fadeInRight';
                this.leave = toDepth < fromDepth ? 'animated fadeOutRight' : 'animated fadeOutLeft';
            }
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../plugins/assets/css/flex.less';
    .router-view {
        position: absolute;
        width: 100%;
        left:0;
        top:0;
    }
    .animated {
        animation-duration: .5s;
    }
</style>